﻿<link href="/Scripts/src/style/formSelects-v4.css" type="text/css" />
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-collapse" lay-accordion="">
                        <div class="layui-colla-item">
                            <!--搜索区域-->
                            <h2 class="layui-colla-title">筛选查询</h2>
<div class="layui-colla-content layui-show">
    <div class="layui-card">
        <form class="layui-form" lay-filter="SearchForm" id="SearchForm" autocomplete="off">
            <div class="layui-form-item">
                <div class="layui-inline">
    <label class="layui-form-label">：</label>
    <div class="layui-input-inline">
        <input type="text" name='RoleName_EN' placeholder='' class="layui-input">
    </div>
</div><div class="layui-inline">
    <label class="layui-form-label">：</label>
    <div class="layui-input-inline">
        <input type="text" name='RoleName' placeholder='' class="layui-input">
    </div>
</div>
                <div class="layui-inline">
                    <label class="layui-form-label"></label>

                    <a class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="Search">搜索</a>
                    <a class="layui-btn layui-btn-primary" id="ResetSearch" data-method="ResetSearch">重置</a>
                </div>
            </div>
        </form>
    </div>
</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-card">
                <div class="layui-card-body">
                    <a class="layui-btn" data-method="Add">新增</a>
                    <a class="layui-btn layui-btn-normal" data-method="ExportExcel">导出</a>
                    <a class="layui-btn layui-btn-danger" data-method="DelAll">批量删除</a>
                    <div style="margin-top: 10px;" id="AutoTablediv">
                        <!-- 加载列表 -->
                        <table class="layui-hide" style="width:100%" id="ListTable" lay-filter="ListTable"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="layui-card" id="EditOrAddHtml" style="display:none;height:700px;overflow:auto">
    <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" lay-filter="AddForm" id="AddForm" autocomplete="off">
            <input type="hidden" name="ID" class="layui-input">
            <div class="layui-form-div">
                <!--弹框编辑区-->
                <div class='layui-form-item'>
    <label class='layui-form-label'><span style='color: red; '>*</span>:</label>
    <div class='layui-input-inline'>
        <input type='text' name='RoleName_EN' class='layui-input' placeholder="请输入" lay-verify='required'>
    </div>
</div> <div class='layui-form-item'>
    <label class='layui-form-label'><span style='color: red; '>*</span>:</label>
    <div class='layui-input-inline'>
        <input type='text' name='RoleName' class='layui-input' placeholder="请输入" lay-verify='required'>
    </div>
</div> 
            </div>

            <div class="layui-form-item" style="text-align:center;">
                <a class="layui-btn" lay-filter="Save" id="save" lay-submit>保存</a>
                <a class="layui-btn layui-btn-primary" id="Cancel" data-method="Cancel">取消</a>
            </div>
        </form>
    </div>
</div>
<script src="/Scripts/common.js?v=4"></script>
<script>
    
    layui.use(['laydate', 'table', 'form', 'formSelects'], function () {
        var laydate = layui.laydate,
            form = layui.form,
            table = layui.table,
            formSelects = layui.formSelects;


        //日期区间控件id数组
        var dateList = ""
        //日期控件id数组
        var editDateIds = ""
        //多选下拉空间ids数组
        var formSelectsIds = ""
        //获取列表地址
        var getUrl = "/SysRole/GetList"
        //弹框中保存地址
        var saveUrl = "/SysRole/SaveOrEdit"
        // 批量删除
        var delallUrl = "/SysRole/DelAll"

        var tableId = "ListTable";


        //接收table 列数组
        var colArry = [{ checkbox: true },{"field":"Remarks","title":null,"align":"center","hide":true},{"field":"RoleID","title":null,"align":"center","hide":true},{"field":"ModifiedOn","title":null,"align":"center","hide":true},{"field":"RoleName_EN","title":null,"align":"center","hide":false},{"field":"ModifiedBy","title":null,"align":"center","hide":true},{"field":"RoleName","title":null,"align":"center","hide":false},{"field":"CreatedBy","title":null,"align":"center","hide":true},{"field":"RecordStatus","title":null,"align":"center","hide":true},{"field":"CreatedOn","title":null,"align":"center","hide":true},{"field":"OrderNo","title":null,"align":"center","hide":true},{"field":"Org","title":null,"align":"center","hide":true}]

        colArry.push({
            "title": "操作", "align": "center", "hide": false,
            templet: function (d) {
                var html = '';
                html += '<a class=\"layui-btn layui-btn-xs\" lay-event=\"edit\" style=\"margin-right: 10px; display:none;\">编辑</a>';
                html += '<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\" style=\"margin-right: 10px; display:none;\"> 删除</a>';
                return html;
            }
        })

        //列表 初始化
        table.render({
            title: tableId,   // 会作为导出excel时的文件名称
            elem: '#' + tableId,
            url: getUrl,
            method: 'post',
            headers: setTableHeader(),
            contentType: "application/json",
            dataType: "json",
            cols: [
                colArry
            ],
            page: true,
            where: {
                dt: new Date()
            },
            height: '600px',
            even: false, //隔行背景
            done: function (res, curr, count) {
                GetInterfaceButton(); //设置当前页面按钮权限
            }
        });


        // 绑定操作列事件
        table.on('tool(' + tableId + ')', function (obj) {

            if (obj.event == "edit") {
                Add(obj.data);
            }
            else if (obj.event == "del") {
                layer.confirm("是否删除该记录？",
                    { btn: ['确认', '取消'] },
                    function () {
                        var ids = new Array();
                        ids.push(obj.data.ID);
                        ajax(delallUrl, "post", "Json", JSON.stringify(ids), function (res) {
                            if (res.code == 0) {
                                obj.del();
                                layer.msg('删除成功！', {
                                    icon: 1
                                });
                            }
                        }, "application/json", true);
                    },
                    function (index) {
                        layer.close(index);
                    }
                );
            }
        });

        var pageIndex = null;
        var Add = function (data) {
            var title = "新增";
            if (data) {
                title = "编辑";
            }
            pageIndex = layer.open({
                type: 1,
                title: title,
                content: $("#EditOrAddHtml"),
                area: ['700px', 'auto'],
                success: function (layero, dIndex) {
                    $(layero).children(".layui-layer-content").css("overflow", "visible").css("height", "auto");
                    //先清空
                    $('#AddForm')[0].reset();
                    //单独处理表单hidden元素
                    $("#AddForm input[type='hidden']").val("")  

                    //重新赋值
                    if (data) {
                        form.val("AddForm", data);
                    }
                    // 更新AddTestPaperForm内的所有表单状态
                    form.render(); 
                    //添加阴影
                    var mask = $(".layui-layer-shade");
                    mask.appendTo(layero.parent());
                }
            });
        }

        //定义方法
        var active = {
            Add: function () {
                Add(null);
            },
            ResetSearch: function () {
                $('#SearchForm')[0].reset();
                form.render(null, 'SearchForm');
                return false;
            },
            Cancel: function () {
                $("#EditOrAddHtml").css("display", "none")
                layer.close(pageIndex);
            },
            ExportExcel: function () {
                ajax(getUrl, "post", "json", JSON.stringify($("#SearchForm").serializeObject()), function (
                    res) {
                    if (res.data == "") {
                        layer.msg("数据为空！");
                        return false;
                    }
                    table.exportFile(tableId, res.data, 'xlsx');

                    layer.msg("导出成功！", {
                        icon: 1
                    });
                }, "application/json", true);
            },
            DelAll: function () {
                var checkStatus = layui.table.checkStatus(tableId).data;

                if (checkStatus.length == 0) {
                    layer.msg("请勾选要删除的项！");
                    return false;
                }
                var ids = new Array();
                for (var i = 0; i < checkStatus.length; i++) {
                    ids.push(checkStatus[i].ID);
                }
                layer.confirm("是否删除？",
                    {
                        btn: ['确认', '取消']
                    },
                    function () {
                        ajax(delallUrl, "post", "Json", JSON.stringify(ids), function (res) {
                            if (res.code == 0) {
                                layer.msg('删除成功！', {
                                    icon: 1
                                });
                                layui.table.reload(tableId, {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                }, 'data');
                            }
                        }, "application/json", true);
                    },
                    function (index) {
                        layer.close(index);
                    }
                );
            }
        }

        //绑定方法
        $('.layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });


        //查询
        form.on('submit(Search)', function (data) {
            //执行重载
            table.reload(tableId, {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            }, 'data');
            return false;
        });

        //保存表单
        form.on('submit(Save)', function (data) {

            var bodyDat = JSON.stringify(data.field)

            //此区域发送网络请求 把数据提交到后台  刷新列表  return false 结束
            ajax(saveUrl, "post", "json", bodyDat, function (res) {
                if (res.code == 0) {
                    $("#EditOrAddHtml").css("display", "none")
                    table.reload(tableId,
                        {
                            where: {
                                dt: new Date()
                            }
                        });
                    layer.close(pageIndex)
                }
            }, "application/json");

            return false;
        })

        //处理表单控件
        //日期
        for (var index = 0; index < editDateIds.length; index++) {
            laydate.render({
                elem: editDateIds[index] //指定元素
            });
        }
        // 日期范围
        for (var index = 0; index < dateList.length; index++) {
            laydate.render({
                elem: 'input[name="' + dateList[index] + '"]',
                type: 'date',
                range: true
            });
        }
        // 多选实例
        for (var index = 0; index < formSelectsIds.length; index++) {
            formSelects.data(formSelectsIds[index], 'local', {
                arr: [
                    { "name": "文本1", "value": 1 },
                    { "name": "文本2", "value": 2 },
                    { "name": "文本3", "value": 3 }
                ]
            });
        }

    });


</script>
